<script setup lang="ts">
import { ref, computed, onMounted } from "vue";
import { formRules } from "./utils/rule";
import { FormProps } from "./utils/types";
import { useAdminHooks } from "@/views/common/admin";
import { useUserStore } from "@/store/modules/user";
import { classifyFormat } from "@/views/formats";
const { adminList, isSuperAdmin, currentUsername } = useAdminHooks();
const userStore = useUserStore();

const props = withDefaults(defineProps<FormProps>(), {
  formInline: () => ({
    id: ""
  })
});

const ruleFormRef = ref();

const newFormInline = ref(props.formInline);
const { classifyMenuOptions } = classifyFormat(newFormInline.value.type);

function getRef() {
  return ruleFormRef.value;
}

defineExpose({ getRef });
</script>

<template>
  <el-form
    ref="ruleFormRef"
    :model="newFormInline"
    :rules="formRules"
    label-width="120px"
  >
    <re-col>
      <el-form-item label="上级菜单">
        <el-cascader
          v-model="newFormInline.parent_id"
          class="w-full"
          :options="classifyMenuOptions"
          :props="{
            value: 'id',
            label: 'title',
            emitPath: false,
            checkStrictly: true
          }"
          clearable
          filterable
          placeholder="请选择上级菜单"
        >
          <template #default="{ node, data }">
            <span>{{ data.title }}</span>
            <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
          </template>
        </el-cascader>
      </el-form-item>
    </re-col>

    <el-form-item label="标题" prop="title">
      <el-input v-model="newFormInline.title" clearable />
    </el-form-item>
  </el-form>
</template>

<style scoped>
:deep(.el-slider__runway) {
  background-color: #e9ecef;
}
:deep(.el-slider__bar) {
  background-color: #409eff;
}
:deep(.el-slider__stop) {
  background-color: #e9ecef;
}
</style>
